<template>
  <el-container>
    <AsideComponent></AsideComponent>
    <el-container style="display: flex;padding:0 0.5rem;">
      <el-header style="border-bottom: 1px solid #cccccc">
        <HeaderComponent></HeaderComponent>
      </el-header>
      <el-row style="line-height: 3rem;height:3rem;border-bottom: 1px solid #cccccc;width: 90vw;overflow-x: auto;overflow-y:hidden;white-space: nowrap">
        <el-tag style="margin: 0 0.5rem 0.5rem 0"
                size="medium"
                v-for="(tab, index) in tabList"
                :key="tab.path"
                @close="handleClose(tab, index)"
                @click="changeMenu(tab)"
                :closable="tab.name !== '首页'"
                :effect="activePath === tab.name ? 'dark' : 'plain'" class="tags-view-container">
          <i :class="tab.class"></i>
          {{ tab.label }}
        </el-tag>
      </el-row>
      <el-main style="padding:0.5rem 0.5rem 0 0.5rem;height:85vh;overflow-y: auto!important;" class="">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </el-main>

    </el-container>

  </el-container>


</template>

<script>
// @ is an alias to /src
import AsideComponent from "@/components/common/AsideComponent.vue";
import HeaderComponent from "@/components/common/HeaderComponent.vue";
import {mapState} from 'vuex';

export default {

  name: 'HomeView',
  components: {
    HeaderComponent,
    AsideComponent
  },
  data() {
    return {
      //菜单列表
      menuList: [],
      isCollapsed: false,
      tabList: []
    }
  },
  created() {
    this.tabList = [{path: '/index', label: '首页', name: '首页', class: 'el-icon-home'}]
    this.$store.commit("setTabList", this.tabList)
    this.tabList = this.$store.state.tabList
    const tabs1 = this.$store.state.tabList
    const tabs2 = window.localStorage.getItem("tabList")
    // const tab3=tabs1.concat(tabs2)
    //
    // this.tabList=Array.from(new Set([...tabs1, ...tabs2].map(JSON.stringify)), JSON.parse);
    this.getMenuList()
  },
  computed: {
    ...mapState({ // 从 state 中得到的计算属性
      activePath: state => state.activePath, // 已选中菜单
      // tabList: state => state.tabList,  // tags菜单列表
      catch_components: state => state.catch_components,  // keepalive缓存
    })
  },
  watch: {
    "$store.state.tabList": {
      handler(newVal, oldVal) {
        console.log("TabList:", newVal)
        this.$store.commit("setTabList", newVal)
      }
    }
  },
  methods: {
    // 按钮左右滑动
    scrollLeft() {
      const dataBar = document.querySelector('.data_bar');
      dataBar.scrollTo({
        left: dataBar.scrollLeft - dataBar.clientWidth,
        behavior: 'smooth'
      });
    },
    scrollRight() {
      const dataBar = document.querySelector('.data_bar');
      dataBar.scrollTo({
        left: dataBar.scrollLeft + dataBar.clientWidth,
        behavior: 'smooth'
      });
    },
    getMenuList() {
      axios.get("/menu/list/role/" + this.$store.state.userInfo.roleId + "/" + parseInt(this.$store.state.userInfo.role.roleLevel)).then(res => {
        console.log("获取菜单：", res)
        if (res.data.success) {
          this.$store.commit("setMenus", res.data.data)
          this.menuList = res.data.data
        }
      }).catch(error=>{

      })
    },
    // 点击菜单 - 传入name，添加到keepalive缓存页面
    selectMenu(item) {
      console.log("ITEM")
      console.log(item)
      // 加入keepalive缓存
      this.$store.commit('addKeepAliveCache', item.name)
      //添加tags标签
      //代表home
      var submenu = {
        path: item.path,
        name: item.name,
        label: item.label
      }
      //修改选中菜单
      this.$store.commit('selectMenu', submenu)
      // this.$router.push("/admin/" + item.path)
      this.$router.push(item.path)

    },
    // 关闭tab标签
    handleClose(tab, index) {
      // 历史选中菜单
      var oldActivePath = this.$store.state.activePath
      // 历史已选中菜单列表
      var oldTabList = this.$store.state.tabList
      if (oldTabList === undefined) {
        return;
      }
      // 计算标签个数
      let length = oldTabList.length - 1
      // 删除tabList中的该对象
      for (let i = 0; i < oldTabList.length; i++) {
        let item = oldTabList[i]
        if (item.name === tab.name) {
          oldTabList.splice(i, 1);
        }
      }
      // 删除keepAlive缓存
      this.$store.commit('removeKeepAliveCache', tab.name)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tab.name !== oldActivePath) {
        return
      }
      // 如果length为1，必然只剩下首页标签，此时关闭后，更新到首页
      if (length === 1) {
        // 同时存储菜单
        this.$store.commit('closeTab', {activePath: '首页', tabList: oldTabList})
        // tab页向左跳转
        this.$router.push({path: oldTabList[index - 1].path})
        // 不再向下执行
        return
      }
      // 关闭的标签是最右边的话，往左边跳转一个
      if (index === length) {
        // 同时更新路径
        oldActivePath = oldTabList[index - 1].name
        // 同时存储菜单
        this.$store.commit('closeTab', {activePath: oldActivePath, tabList: oldTabList})
        // tab页向左跳转
        this.$router.push({path: oldTabList[index - 1].path})
      } else {
        // 同时更新路径
        oldActivePath = oldTabList[index].name
        window.localStorage.setItem("activePath", oldActivePath)
        // 同时存储菜单
        this.$store.commit('closeTab', {activePath: oldActivePath, tabList: oldTabList})
        // tab页向右跳转
        this.$router.push({path: oldTabList[index].path})
      }
    },
    // 点击标签跳转路由
    changeMenu(item) {
      // 历史选中菜单
      var oldActivePath = this.$store.state.activePath
      console.log(oldActivePath)
      // 首先判断点击的是否是自己，如果是自己则return
      if (oldActivePath === item.name) {
        return
      }
      console.log("ItemPath:", item)
      // 不是自己，存储菜单
      window.localStorage.setItem("activePath", item.name)
      this.$store.commit('changeMenu', item.name)
      // 页面跳转
      this.$router.push(item.path)
    },
    //加载菜单


  }
}
</script>
<style>

.tabs-switch-page {
  display: flex;
  align-items: center;
  height: 40px;
  /*/ / background-color: #fff;*/
  overflow: hidden;
}

.el-tag {
  cursor: pointer;
  margin-left: 10px;
  border-radius: 2px;
  font-size: 12px;
  color: #1890FF;

}

.el-tag--dark {
  color: #fff;
  background: #1890FF;
}

.tags-view-container:before {
  content: "";
  background: #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}
</style>
